<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <select name="" id="boss">
		<option value="">请选择省份</option>
	</select>
    <select name="" id="son1">
		<option value="">请选择城市</option>
	</select>
    <select name="" id="son2">
		<option value="">请选择区县</option>
	</select>
</body>
<script>
    let select = document.querySelector("#boss");
    let selectOne = document.querySelector("#son1");
    let selectTwo = document.querySelector("#son2");
    let city = '';
    fetch("./city.json").then(function(response) {
        return response.json()
    }).then(function(data) {
        for (let key in data) {
            let option = document.createElement("option");
            option.value = key;
            option.innerText = key;
            select.appendChild(option)
        };
        select.addEventListener("change", function(event) {
            selectOne.innerHTML = "请选择城市"
            selectTwo.innerHTML = "请选择区县";

            if (select.value != "") {
                selectOne.disabled = false;
                selectTwo.disabled = false;
            }
            for (let key in data[event.target.value]) {
                let option = document.createElement("option");
                option.value = key;
                option.innerText = key;
                selectOne.appendChild(option)
            }

            city = event.target.value;
        });

        selectOne.addEventListener("click", function(e) {
                selectTwo.innerHTML = "";
                // let a = e.target.value
                let arr = data[city][e.target.value];
                arr.forEach(function(key) {
                    let option = document.createElement("option");
                    option.value = key;
                    option.innerText = key;
                    selectTwo.appendChild(option)
                })
                if (selectTwo.innerHTML == "") {
                    selectTwo.innerHTML = "请选择区县"
                }

            })
            //禁用选择框
        if (select.value == "") {
            selectOne.disabled = true;
            selectTwo.disabled = true;
        }

    }).catch(function(err) {
        console.log(err);
    })
</script>

</html>